<template>
	<view class="main">
		<view class="search_box">
			<view class="search">
				<view class="search_left">
					<view class="p-l-24">
						<u-image :src="searchIcon" width="40rpx" height="40rpx"></u-image>
					</view>
					<view class="search_tips">
						<u-input v-model="search" :placeholder="placeholder" :clearable="true" :trim="true" :border="false"
							placeholder-style="color: #CCCCCC;fontSize:32rpx" />
					</view>
				</view>
				<view class="search_right" @click="goSearch">
					搜索
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//@mySearch   //父组件传递 mySearch
	export default {
		props:{
			placeholder:{
				default:'搜索姓名',
				required:false
			}
		},
		data() {
			return {
				search:'',
				searchIcon: require('@/static/img/search@2x.png'),
			}
		},
		mounted() {
			//this.$store.commit('SEARCHINPUT','')  //清空search
		},
		beforeDestroy() {
			//this.$store.commit('SEARCHINPUT','') //清空search
		},
		computed:{
			// search:{
			// 	get(){
			// 		console.log(this.$store.state.doc.search,'search')
			// 		return this.$store.state.doc.search
			// 	},
			// 	set(value) {
			// 		this.$store.commit('SEARCHINPUT',value)
			// 		//this.$store.state.doc.search = value
			// 	}
			// }
		},
		methods: {
			goSearch() { //搜素按钮
				//if (this.search.length > 0) {
					this.$emit('mySearch',this.search)
					
				//} else {
					//this.$u.toast('请输入搜素内容')
				//}
			
			},
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		.search_box {
			width: 100%;
			padding: 0 24rpx;
			background-color: #FFFFFF;

			.search {
				//margin: 0 24rpx;
				background-color: #FFFFFF;
				padding-top: 1px;
				//margin: 20rpx 0;
				width: 100%;
				height: 74rpx;
				border-radius: 200rpx;
				border: 1px solid #4DC0D9;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.search_left {
					flex: 1;
					display: flex;
					align-items: center;

					//justify-content: space-between;
					.search_tips {
						width: 100%;
						padding-left: 10rpx;
						padding-right: 20rpx;
					}
				}

				.search_right {
					padding: 18rpx 40rpx;
					background: #4DC0D9;
					border-radius: 200rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 38rpx;
				}
			}
		}

	}
</style>